<template>
	<div class="container">
		<u-swiper :list="list" indicator indicatorMode="line" circular></u-swiper>

		<view class="opera">
			<view class="timer">
				09/24 星期四 多云
			</view>
			<view class="btns">
				<u-button text="设备租赁"></u-button>
				<u-button text="地图导览"></u-button>
			</view>
		</view>

		<view class="menus">
			<view class="menu" v-for='(it,index) in menus' :key="index">
				<image :src="it.img" mode=""></image>
				<text class="menu-title">{{it.title}}</text>
			</view>
		</view>



		<view class="card-title">
			<text class="title">
				报警处理
			</text>
			<view class="more">
				更多
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>

		<view class="alarms">
			<view class="alarm" v-for='(it,index) in alarmList' :key="index">
				<view class="alarm-t">
					<text class="title">孩子丢失</text>
					<u-tag text="紧急" plain plainFill type="warning"></u-tag>
				</view>
				<view class="alarm-c">
					因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭
				</view>
				<view class="alarm-b">
					
					<view class="address">
						<u-icon name="map" color="#666" size="20"></u-icon>
						景区位置
					</view>
					<view class="p">
						<text class="person">张女士</text>
						<text class="time">
							2024-09-03 12:33:44
						</text>
					</view>
				</view>
			</view>
		</view>


		<view class="card-title">
			<text class="title">
				故障处理
			</text>
			<view class="more" @click="handleNavTo('/pages/earlyWarningPage/earlyWarningList/earlyWarningList')">
				更多
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		<view class="alarms">
			<view class="alarm" v-for='(it,index) in alarmList' :key="index">
				<view class="alarm-t">
					<text class="title">孩子丢失</text>
					<u-tag text="紧急" plain plainFill type="warning"></u-tag>
				</view>
				<view class="alarm-c">
					因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭因天气原因，滕王阁景点暂时关闭
				</view>
				<view class="alarm-b">
					
					<view class="address">
						<u-icon name="map" color="#666" size="20"></u-icon>
						景区位置
					</view>
					<view class="p">
						<text class="person">张女士</text>
						<text class="time">
							2024-09-03 12:33:44
						</text>
					</view>
				</view>
			</view>
		</view>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				alarmList: [{}, {}],
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				menus: [{
					img: '/static/images/demo.jpg',
					title: '参观须知'
				}, {
					img: '/static/images/demo.jpg',
					title: '推荐路线'
				}, {
					img: '/static/images/demo.jpg',
					title: '留言意见'
				}, {
					img: '/static/images/demo.jpg',
					title: '语音墙'
				}, {
					img: '/static/images/demo.jpg',
					title: '电子围栏'
				}, {
					img: '/static/images/demo.jpg',
					title: '实时定位'
				}, {
					img: '/static/images/demo.jpg',
					title: '一键报警'
				}, {
					img: '/static/images/demo.jpg',
					title: '通知公告'
				}, {
					img: '/static/images/demo.jpg',
					title: '故障上报'
				}, {
					img: '/static/images/demo.jpg',
					title: '故障处理'
				}, {
					img: '/static/images/demo.jpg',
					title: '巡检计划'
				}, {
					img: '/static/images/demo.jpg',
					title: '预警提醒'
				}, ]
			}
		},
		methods:{
			handleNavTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22upx 30upx;
		box-sizing: border-box;

		.title {
			font-size: 36upx;
			font-weight: 800;
		}

		.more {
			display: flex;
			align-items: center;
		}
	}

	.opera {
		width: calc(100% - 60upx);
		background-color: rgb(235, 245, 255);
		margin-left: 30upx;
		padding: 22upx 10upx;
		z-index: 9;
		box-sizing: border-box;
		box-shadow: $default-shadow;
		position: relative;
		border-radius: 20upx;
		margin-top: -20upx;

		.timer {
			margin-bottom: 12upx;
			font-size: 28upx;
			padding-left: 20upx;
		}

		.btns {
			display: flex;

			button {
				margin: 0 20upx;
			}
		}
	}

	.menus {
		display: flex;
		flex-wrap: wrap;
		padding: 22upx 30upx;
		box-sizing: border-box;
		font-size: 28upx;

		.menu {
			width: calc(25%);

			// margin-right: calc(80upx/3);
			&:nth-child(4n) {
				margin-right: 0;
			}

			margin-bottom: 22upx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 80upx;
				height: 80upx;
			}

			text {
				margin-top: 4upx;
			}
		}
	}


	.alarms {
		padding: 0 30upx;
		box-sizing: border-box;

		.alarm {
			padding: 22upx 30upx;
			box-sizing: border-box;
			border: 1upx solid $uni-border-color;
			border-radius: 12upx;
			position: relative;
			background-color: #fff;
			margin-bottom: 22upx;

			&:before {
				content: '';
				border-radius: 12px;
				background-color: orange;
				width: 100%;
				height: calc(100%);
				position: absolute;
				top: 0;
				z-index: -1;
				left: -16upx;
			}

			.alarm-t {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-size: 32upx;
				}
			}

			.alarm-c {
				font-size: 30upx;
				color: $uni-text-color-grey;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				line-height: 1.6;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin: 12upx 0;
			}

			.alarm-b {
				display: flex;
				.address{
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: $uni-text-color-sub;
				}

				.p {
					font-size: 28upx;
					color: $uni-text-color-sub;
					margin-left: auto;

					.person {
						margin-right: 8upx;
					}

					.time {
					}
				}
			}
		}
	}
</style>